<template>
  <div v-if="$route.path === '/teacherResource/training/source'" class="libaryWrapper">
    <div class="flex-line split">
      <div class="flex-line flex-1  center">
        <el-select v-model="filter.dirId" placeholder="请选择素材类型" class="mr-20" style="width:200px" clearable>
          <el-option v-for="item in dirList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="filter.title" class="mr-20" placeholder="请输入课程名称" clearable style="width:200px" />
        <el-button class="gradientVertical" size="large" round @click="searchFun()">搜索</el-button>
      </div>
      <div>
        <el-button type="success" round plain @click="addHandleFun()">添加</el-button>
        <el-button type="info" round plain @click="editHandleFun()">编辑</el-button>
        <el-button type="danger" round plain @click="deleteHandleFun()">删除</el-button>
        <el-button class="gradientVertical" size="large" round @click="myVisible=true">我的素材</el-button>
      </div>
    </div>
    <!--list-->
    <el-checkbox-group v-model="chosedIds">
      <el-row v-if="list.length>0" v-loading="loading" class="pt-30" :gutter="30">
        <el-col v-for="(course) in list" :key="course.id" :span="6" :md="8" :lg="6" class="item1 pr-20">
          <el-checkbox class="courseItem" :label="course.id">
            <Item :detail="course" />
          </el-checkbox>
        </el-col>
      </el-row>
    </el-checkbox-group>
    <!--/list-->
    <empty v-if="!loading && list.length<=0" />
    <Pagination v-if="pagination.total>0" :total="pagination.total" :page-num="pagination.pageNum" :page-size="pagination.pageSize" @paginationFun="paginationFun" />
    <!--新增弹窗-->
    <add-drawer :id="addObj.id" :visible.sync="addObj.visible" :type="addObj.type" @getList="getData" />
    <!--/新增弹窗-->
    <my-drawer :visible.sync="myVisible" />
  </div>
  <router-view v-else />
</template>

<script>
import { mapGetters } from 'vuex'
import { getDocList, deleteDocuments, getDirList } from './api'
import Pagination from '@/components/Basic/PaginationTwo'
import dayjs from 'dayjs'
import addDrawer from './components/addDrawer'
import myDrawer from './components/myDrawer'
import Item from './components/item'
export default {
  components: {
    Pagination, addDrawer, Item, myDrawer
  },
  data () {
    return {
      loading: true,
      list: [],
      chosedIds: [],
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 1
      },
      addObj: {
        visible: false,
        id: '',
        type: ''
      },
      filter: {
        dirId: '',
        title: '',
        dirType: 4
      },
      dirList: [],
      myVisible: false
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created () {
    this.getData()
    this.getDirList()
  },
  methods: {
    // 获取目录
    getDirList () {
      getDirList({ type: 4, pageNum: 0, pageSize: 999 }).then(res => {
        // this.dirList = res.content || []
        res.content.map(item => {
          const obj = {
            value: item.id,
            label: item.title
          }
          this.dirList.push(obj)
        })
        console.log(this.dirList)
      })
    },
    // 编辑
    editHandleFun () {
      console.log(this.chosedIds)
      if (this.chosedIds.length === 1) {
        this.addObj = {
          visible: true,
          id: this.chosedIds[0],
          type: ''
        }
      } else {
        this.$message('请选择一条数据进行编辑～～～')
        return
      }
    },
    // 删除
    deleteHandleFun () {
      if (this.chosedIds.length > 0) {
        const form = new FormData()
        form.append('ids', this.chosedIds)
        console.log(form)
        this.$confirm('确认删除吗？')
          .then(_ => {
            console.log(_)
            console.log(_ === 'confirm')
            if (_ === 'confirm') {
              console.log(_ === 'confirm')
              deleteDocuments(form, 'delete').then(() => {
                this.$message.success('删除成功')
                this.getData()
              })
            }
            // done()
          })
          .catch(_ => { })
      } else {
        this.$message('请选择数据进行删除～～～')
        return
      }
    },
    // 添加
    addHandleFun () {
      this.addObj = {
        visible: true,
        id: '',
        type: ''
      }
    },
    // 搜索
    searchFun () {
      this.chosedIds = []
      this.pagination.pageNum = 1
      this.pagination.total = 0
      this.getData()
    },
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    // 获取数据
    getData () {
      this.loading = true
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        ...this.filter
      }
      getDocList(prams).then(res => {
        this.loading = false
        this.pagination.total = res.totalElements
        res.content.map(item => {
          item.beginAt = dayjs(item.beginAt).format('YYYY-MM-DD HH:mm')
        })
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.courseItem {
  width: 100%;
  display: block;
  position: relative;

  ::v-deep {
    > .el-checkbox__input {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    > .el-checkbox__label {
      display: block;
      width: 100%;
    }
  }
}
</style>
